<template>
  <div>
    <div>
      <el-form>
        <el-row :gutter="24">

          <el-col :span="8">
            <el-form-item label="字段编码">
              <el-input v-model="searchProp"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="字段名">
              <el-input v-model="searchLabel"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="24">
          <el-col>
            <el-button @click="quickEvent('view')">一键仅查看</el-button>
            <el-button @click="quickEvent('edit')">一键仅编辑</el-button>
            <el-button @click="quickHideEvent">一键隐藏</el-button>
            <slot name="menuBar">

            </slot>
          </el-col>


        </el-row>
      </el-form>

    </div>

    <el-table :data="dataSource">
      <el-table-column label="字段名" prop="label"></el-table-column>
      <el-table-column label="字典编码" prop="prop"></el-table-column>
      <el-table-column label="操作" header-align="center">
        <template #="scope">
          <el-radio-group v-model="modelValue[scope.row.prop]">
            <el-radio label="可编辑" value="edit"></el-radio>
            <el-radio label="仅查看" value="view"></el-radio>
            <el-radio label="隐藏" value="hide"></el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>
<script>
import {deepClone} from "utils/util";


const systemFormFormFields = [
  "id",
  "create_time",
  "del_flag",
  "fly_qiu_main_id",
  "act_proc_inst_id",
  "act_proc_def_key",
  "act_proc_state",
  "act_proc_task_def_key",
  "acr_proc_task_state",
  "act_proc_task_inst_id",
]


export default {
  name: "editModelFormProp",
  components: {},
  computed: {
    dataSource() {
      if (!this.formItems || this.formItems.length < 1) {
        return [];
      }
      return this.formItems.filter(e => {
        if (this.searchProp.length < 1 && this.searchLabel.length < 1) {
          return true
        }
        if (this.searchLabel.length > 0 && e.label && e.label.length > 0 && e.label.indexOf(this.searchLabel) > -1) {
          return true;
        }
        return this.searchProp.length > 0 && e.prop && e.prop.length > 0 && e.prop.indexOf(this.searchProp) > -1;
      })
    }
  },
  props: {
    formItems: {
      type: [],
      default: () => {
        return []
      }
    },
    modelValue: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      searchLabel: '',
      searchProp: '',
    }
  },
  methods: {
    quickEvent(type) {
      let newModelValue = deepClone(this.modelValue || {})
      for (const formItem of this.formItems) {
        if (!systemFormFormFields.includes(formItem.prop)) {
          newModelValue[formItem.prop] = type
        }
      }
      this.$emit("update:modelValue", newModelValue)
    },
    quickHideEvent() {
      let newModelValue = deepClone(this.modelValue || {})
      for (const formItem of this.formItems) {
        if (systemFormFormFields.includes(formItem.prop)) {
          newModelValue[formItem.prop] = "hide"
        }
      }
      this.$emit("update:modelValue", newModelValue)
    }
  }
}
</script>
<style scoped>

</style>